<template>
  <div>
    <!-- 列表页面 -->
    <div class="container">
      <div class="header">
        <div class="title">组织管理</div>
      </div>
      <!-- 下拉筛选 -->
      <div class="select-group">
        <div class="select-box">
          <span>组织名称 </span>
          <el-select size="medium" clearable filterable v-model="pname" placeholder="请选择">
            <el-option v-for="item in pNameList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="select-box">
          <span>所属部门 </span>
          <el-select size="medium" clearable filterable v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="select-box">
          <span>工作地点 </span>
          <el-select size="medium" clearable filterable v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
      </div>
      <div class="select-group">
        <div class="select-box">
          <span>候选人状态 </span>
          <el-select size="medium" clearable filterable v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="select-box">
          <span>推荐组织 </span>
          <el-select size="medium" clearable filterable v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="select-box">
          <span>期望薪资 </span>
          <el-select size="medium" clearable filterable v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
      </div>
      <!-- 表格 -->
      <div class="header">
        <div class="title1">组织架构</div>
      </div>
      <div class="block">
        <p></p>
        <el-tree :data="orgList" node-key="id" default-expand-all :expand-on-click-node="true">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => handleAdd(node,data)"> 添加下级组织 </el-button>
              <el-button type="text" size="mini" @click="() => handleEdit(node,data)"> 编辑 </el-button>
              <el-button type="text" size="mini" @click="() => handleDelete(node, data)"> 删除 </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <el-pagination style="float: right; margin-right: 15%" background layout="prev, pager, next,total" :total="total">
      </el-pagination>
    </div>
    <!-- 编辑页面 -->
    <!-- <candidate-modify v-else @editClose="editClose" :editcandidateId="editcandidateId"></candidate-modify> -->
    <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog{{dialogFormVisible}}</el-button> -->
    <el-dialog title="提示" :visible.sync="dialogFormVisible" center>
      <el-form :model="form">
        <div class="dialog-box">
          <div class="dialog-title">此操作将会删除组织 是否继续?</div>
          <div class="dialog-text">
            <div class="dialog-i">名称:{{ dialogNmae }}</div>
          </div>
        </div>
        <el-form-item label="评价" :label-width="formLabelWidth">
          <el-input maxlength="100" type="textarea" v-model="remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加组织" :visible.sync="showAdd" center>
      <el-form :model="form">
        <div class="dialog-box"></div>
        <el-form-item label="新组织名称" label-width="100px">
          <el-input placeholder="请输入组织名称" type="text" v-model="newOrgAdd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级组织" label-width="100px">
          <!-- <el-select style="width: 100%" placeholder="请选择上级组织" type="text" v-model="newRoot" autocomplete="off">
            <el-option v-for="(item,index) in optionsx" :disabled="newOrg == item.name" :key="index" :label="item.name" :value="item.name"> </el-option>
          </el-select> -->
          <el-input :disabled="true" placeholder="请输入组织名称" type="text" v-model="newOrg" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAdd = false">取 消</el-button>
        <el-button type="primary" @click="showAdd = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="showEdit" center>
      <el-form :model="form">
        <div class="dialog-box"></div>
        <el-form-item label="组织名称" label-width="100px">
          <el-input placeholder="请输入组织名称" type="text" v-model="newOrg" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级组织" label-width="100px">
          <el-select style="width: 100%" placeholder="请选择上级组织" type="text" v-model="newRoot" autocomplete="off">
            <el-option v-for="(item,index) in optionsx" :disabled="newOrg == item.name" :key="index" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="showEdit = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
// import { ElMessageBox, ElMessage } from 'element-plus'
import positionModel from '@/model/position'
import toolModel from '@/model/tool'
// import candidateModify from './detail'
export default {
  components: {
    // candidateModify,
  },
  data() {
    return {
      orgList: [],
      newOrg:'',
      newOrgAdd:'',
      newRoot:'',
      searchMenu: {
        name: '请筛选',
        state: '请筛选',
        minsalary: '请筛选',
        maxsalary: '请筛选',
        HR: '请筛选',
      },
      options: [
        {
          value: '选项1',
          label: '待筛选',
        },
        {
          value: '选项2',
          label: '待面试',
        },
        {
          value: '选项3',
          label: '待offer',
        },
        {
          value: '选项4',
          label: '待录用',
        },
        {
          value: '选项5',
          label: '已入职',
        },
      ],
      optionsx:[],
      pNameList: [
        {
          value: '恒生',
          label: '恒生',
        },
        {
          value: '卓软',
          label: '卓软',
        },
        {
          value: '研发部',
          label: '研发部',
        },
        {
          value: '人力资源部',
          label: '人力资源部',
        },
      ],
      data: [
        {
          root: true,
          name: '杭州卓软科技有限公司',
          children: [
            {
              name: '人力资源部',
              children: [
                {
                  name: '招聘组',
                },
                {
                  name: '交付组',
                },
                {
                  name: '行政组',
                },
              ],
            },
          ],
        },
        {
          name: '恒生电子股份有限公司',
          root: true,
          children: [
            {
              name: '共享技术中心',
              children: [
                {
                  name: '研发部',
                },
                {
                  name: '业务部',
                },
              ],
            },
          ],
        },
      ],
      total: 12,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      value: '',
      pname: '',
      candidates: [],
      dialogFormVisible: false,
      formLabelWidth: '60px',
      loading: false,
      dialogNmae: '',
      remark: '',
      showAdd: false,
      showEdit:false,
      form: null,
    }
  },
  mounted() {
    this.init() //数据初始化
  },
  created() {
    //   this.orgList = this.data
  },
  watch: {
    pname(val) {
      this.$refs.tree.filter(val)
    },
    orgList() {
      //监控数据更新
      // this.organizationList()
    },
  },
  methods: {
    handleCommand(command) {
      this.searchMenu.HR = command
    },
    handleNodeClick(data) {
      console.log(data)
    },
    handleClick() {
      // eslint-disable-next-line
      alert('button click')
    },
    // 执行获取数据等初始化动作
    async init() {
      this.organizationList({
        // parentId: 0,
      })
    },
    filterNode(value, data) {
      if (!value) return true
      console.log(data.label, value)
      return data.label.indexOf(value) !== -1
    },
    //组织管理服务
    async organizationList(params) {
      var that = this
      try {
        that.loading = true
        let { data } = await positionModel.organizationList(params)
        let allData = [...data]
        let treeMapList = allData.reduce((memo, current) => {
          current.label = current.name
          memo[current['id']] = current
          return memo
        }, {})
        let result = allData.reduce((arr, current) => {
          let parentId = current.parentId
          let parent = treeMapList[parentId]
          if (parent) {
            parent.children ? parent.children.push(current) : (parent.children = [current])
          } else if (parentId == 0) {
            //这是根组织
            arr.push(current)
          }
          return arr
        }, [])
        that.orgList = result
        that.optionsx = allData
        that.loading = false
      } catch (error) {
        that.loading = false
        if (error.code === 10020) {
          that.orgList = []
        }
      }
    },
    addPosition(data) {
      this.newOrg = data.label
      this.showAdd = true
    },
    handleDelete(row) {
      this.remark = ''
      this.dialogNmae = row.label
      this.dialogFormVisible = true
    },
    async handleAdd(node,data){
       if(data&&data.parentId==0){
        this.newRoot = '-'
      }else{
        let root= await positionModel.organizationList({id:data.parentId})
        this.newRoot = root.data[0].name
      }
      this.newOrg = data.label
      this.showAdd = true
    },
    async handleEdit(node,data){
      if(data&&data.parentId==0){
        this.newRoot = '-'
      }else{
        let root= await positionModel.organizationList({id:data.parentId})
        this.newRoot = root.data[0].name
      }
      this.newOrg = data.label
      this.showEdit = true
    },
    editClose() {
      this.getcandidates()
    },
    indexMethod(index) {
      index = index + 1
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 20px;
      font-weight: 500;
    }
    .title1 {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 200;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }

  .dialog-box {
    text-align: center;
    padding: 0 80px;
  }

  .dialog-title {
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 10px;
    color: #f4516c;
  }

  .dialog-text {
    display: flex;
    flex-wrap: wrap;
    text-align: center;

    .dialog-i {
      width: 100%;
      line-height: 24px;
      height: 24px;
      margin: 10px 0;
    }
  }

  .dialog-footer {
    text-align: center;
  }
}

.select-group {
  display: flex;

  .select-box {
    width: 30%;
    height: 24px;
    line-height: 24px;
    margin-bottom: 20px;

    span {
      display: inline-block;
      width: 90px;
    }
    .down-title {
      padding: 0 10px;
    }

    .down-div {
      border: 2px solid #007aff;
      border-radius: 4px;
      margin: 0;
      padding: 0;

      .down-dropdown {
        height: 24px;
        padding-left: 10px;
        line-height: 24px;
      }
    }
  }

  .el-tree-node__label {
    font-size: 20px;
    font-weight: bolder;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.custom-tree-container {
  width: 85%;
  height: 300px;
}
</style>
